<template>
  <div class="suffer-wrap">
    <div class="title-box">
      <span class="line"></span>
      <span class="title">获取方式：</span>
    </div>
    <div class="gain-title">用户可通过以下方式获取经验值，用于升级蓝聘账户
      等级：
    </div>
    <div class="gain-box">
      <table class="gain-con">
        <tr>
          <td>获取方式</td>
          <td>经验值</td>
        </tr>
        <tr>
          <td>
            <span class="title1">每周签到</span>
            <span class="title2">签到中断则重新累积，每周一重置。</span>
          </td>
          <td>
            <span class="title3">依次10&nbsp;20&nbsp;30&nbsp;40</span>
            <span class="title4">50&nbsp;60&nbsp;90经验值</span>
          </td>
        </tr>
        <tr>
          <td>每日首次评论</td>
          <td>10经验值</td>
        </tr>
        <tr>
          <td>每日首次圈子发布动态</td>
          <td>20经验值</td>
        </tr>
        <tr>
          <td>首次绑定工资卡</td>
          <td>100经验值</td>
        </tr>
        <tr>
          <td>首次企业点评</td>
          <td>100经验值</td>
        </tr>
        <tr>
          <td>蓝聘入职</td>
          <td>200经验值</td>
        </tr>
      </table>
    </div>

    <div class="title-box">
      <span class="line"></span>
      <span class="title">等级说明：</span>
    </div>

    <div class="level-box">
      <table class="level-con">
        <tr>
          <td>经验值范围</td>
          <td>等级名称</td>
          <td>等级图标</td>
        </tr>
        <tr>
          <td>0＜值≤3000</td>
          <td>见习职工</td>
          <td><img src="./level1.png" class="pic" onclick="return false"/></td>
        </tr>
        <tr>
          <td>3000＜值≤6000</td>
          <td>初级职工</td>
          <td><img src="./level2.png" class="pic" onclick="return false"/></td>
        </tr>
        <tr>
          <td>6000＜值≤12000</td>
          <td>中级职工</td>
          <td><img src="./level3.png" class="pic" onclick="return false"/></td>
        </tr>
        <tr>
          <td>12000＜值≤18000</td>
          <td>高级职工</td>
          <td><img src="./level4.png" class="pic" onclick="return false"/></td>
        </tr>
        <tr>
          <td>18000＜值≤24000</td>
          <td>部门精英</td>
          <td><img src="./level5.png" class="pic" onclick="return false"/></td>
        </tr>
        <tr>
          <td>24000＜值≤30000</td>
          <td>部门经理</td>
          <td><img src="./level6.png" class="pic" onclick="return false"/></td>
        </tr>
        <tr>
          <td>30000＜值≤36000</td>
          <td>区域经理</td>
          <td><img src="./level7.png" class="pic" onclick="return false"/></td>
        </tr>
        <tr>
          <td>36000＜值≤45000</td>
          <td>总经理</td>
          <td><img src="./level8.png" class="pic" onclick="return false"/></td>
        </tr>
        <tr>
          <td>45000＜值</td>
          <td>董事长</td>
          <td><img src="./level9.png" class="pic" onclick="return false"/></td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
  export default {
    name: "sufferexplain"
  }
</script>

<style lang="stylus" scoped>
  @import "../../../assets/stylus/mixin.styl"

  .suffer-wrap
    margin: 0 auto
    wh(93.6%, 100%)
    .title-box
      display: flex
      align-items: center
      margin-top: 0.627rem
      margin-bottom: 0.427rem
      .line
        display: block
        margin-right: 0.28rem
        wh(0.08rem, 0.4rem)
        background: rgba(60, 175, 255, 1)
      .title
        size-color(0.427rem, rgba(51, 51, 51, 1))
        font-weight: 500
    .gain-title
      margin-bottom: 0.307rem
      size-color(0.4rem, rgba(102, 102, 102, 1))
    .gain-box
      margin: 0 auto
      wh(100%, auto)
      .gain-con
        wh(100%, 100%)
        border: 0.027rem solid rgba(229, 229, 229, 1)
        tr
          size-color(0.32rem, rgba(51, 51, 51, 1))
          height: 0.96rem
          &:nth-child(1)
            background: rgba(60, 175, 255, 1)
            size-color(0.373rem, rgba(255, 255, 255, 1))
          &:nth-child(2)
            height: 1.333rem
          td
            vertical-align: middle
            border-right: 0.027rem solid rgba(229, 229, 229, 1)
            border-bottom: 0.027rem solid rgba(229, 229, 229, 1)
            &:nth-child(1)
              width: 6.133rem
              padding-left: 0.32rem
            &:nth-child(2)
              text-align: center
            .title1
              display: block
              padding-bottom: 0.107rem
            .title2
              size-color(0.32rem, rgba(153, 153, 153, 1))
            .title3
              display: block
              padding-bottom: 0.107rem
    .level-box
      margin: 0 auto
      wh(100%, 7.92rem)
      padding-bottom: 0.64rem
      .level-con
        wh(100%, 100%)
        border: 0.027rem solid rgba(229, 229, 229, 1)
        tr
          size-color(0.32rem, rgba(51, 51, 51, 1))
          height: 0.8rem
          &:nth-child(1)
            height: 0.96rem
            background: rgba(60, 175, 255, 1)
            size-color(0.373rem, rgba(255, 255, 255, 1))
          td
            vertical-align: middle
            border-right: 0.027rem solid rgba(229, 229, 229, 1)
            border-bottom: 0.027rem solid rgba(229, 229, 229, 1)
            &:nth-child(1)
              width: 3.573rem
              padding-left: 0.32rem
            &:nth-child(2)
              width: 2.853rem
              text-align: center
            &:nth-child(3)
              width: 2.853rem
              text-align: center
            .pic
              wh(1.747rem, 0.373rem)
</style>
